<template>
  <div>
    <!--头部+banner-->
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2">
        <div class="a-3">
          <Header v-bind:state="4"></Header>
        </div>
      </div>
      <!--banner-->
      <div class="target e-1" id="target-2">
        <div>
          <div>
            <img src="@/assets/image/ny-banner3.png" />
          </div>
        </div>
      </div>
      <!--消息通知-->
      <div class="a-14">
        <div class="a-15">
          <img class="a-16" src="@/assets/image/tz.png" />
          <div class="a-17">
            <div class="swiper-container swiper-containerOne">
              <div class="swiper-wrapper clearfix">
                <div class="swiper-slide" v-for="(item,index) in noticeList" :key="index">
                  <a href="javascipt:;">{{item.noticeContent}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--新闻列表-->
    <div class="e-2">
      <div class="e-3">
        <!--路由-->
        <div class="b-8">
          <div class="b-9">
            当前位置：
            <a href="javascript:;">首页</a> >
            <a href="javascript:;">行业资讯</a>
          </div>
        </div>
        <div class="e-4">
          <div class="a-48">
            <div class="a-49">Industry Information</div>
            <div class="a-50">行业资讯</div>
            <img class="a-51" src="@/assets/image/index-9.png" />
          </div>
          <ul class="e-5">
            <li v-for="item in tradeNewsList" :key="item.trade_news_id">
              <a href="javascript:;" @click="toshownews(item.trade_news_id)">
                <div class="e-6">
                  <img class="e-7" :src="item.image" />
                </div>
                <div class="e-8">
                  <div class="e-16">
                    <div class="e-9">
                      <div class="e-10">{{$moment(item.create_time).format('DD')}}</div>
                      <div class="e-11"></div>
                      <div class="e-12">{{$moment(item.create_time).format('YYYY-MM')}}</div>
                    </div>
                    <div class="e-13">
                      <div class="e-14">{{item.title}}</div>
                      <!--标题-->
                      <div class="e-15">{{item.synopsis}}</div>
                      <!--简介-->
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
          <div class="a-35 h-48">
            <mo-paging
              :page-index="currentPage"
              :total="totalPage"
              :page-size="pageSize"
              @change="pageChange"
            ></mo-paging>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/views/header.vue";
import MoPaging from "@/views/Page";
import { apiTradeNewsList } from "@/api/listNews";
export default {
  components: {
    Header,
    MoPaging,
  },
  created() {
    this.noticeList = JSON.parse(window.sessionStorage.getItem("lb"));

    this.getTradeNewsList();
  },
  data() {
    return {
      noticeList: Array,
      tradeNewsList: [],
      pageSize: 5,
      totalPage: 1, //总页数
      currentPage: 1, //当前页
    };
  },
  methods: {
    //新闻详情
    toshownews(e) {
      console.log(e);
      let _this = this;
      _this.$router.push({
        name: "showNews",
        query: {
          product: e,
        },
      });
    },
    // 下一页
    pageChange(e) {
      this.currentPage = e;
      this.getTradeNewsList();
    },
    getTradeNewsList() {
      let data = { currentPage: this.currentPage, pageSize: this.pageSize };
      apiTradeNewsList(data).then((response) => {
        this.totalPage = response.data.total;
        this.tradeNewsList = response.data.tradeNewsList;
      });
    },
  },
  name: "index",
};
</script>

<style scoped>
@import "../../css/index.css";
@import "../../css/list_news.css";
@import "../../css/idangerous.swiper.css";
</style>
